<template>
  <view class="batch-template-container">
    <view class="header-container">
      <view class="btn-content">
      <view class="reset">
        <u-button
          class="btn"
          type="primary"
          hover-class="none"
          :custom-style="{
            backgroundColor: 'transparent',
            color: '#666'
          }"
          shape="circle"
          size="mini"
          @click="handleReset">重选</u-button>
      </view>
      <view class="comfirm-btn">
        <u-button
          class="btn"
          type="primary"
          hover-class="none"
          :custom-style="{
            backgroundColor: '#56d39d'
          }"
          shape="circle"
          size="mini"
          :disabled="selectNum === 0"
          @click="handleBatchAddTextTemplateArtworks">确认添加({{ selectNum }})</u-button>
      </view>
    </view>
      <u-tabs
        :list="navListData"
        :current="tabsCurrent"
        inactive-color="#333"
        active-color="#56d39d"
        :gutter="10"
        bg-color="transparent"
        class="tabs-content"
        name="category_name"
				font-size="28"
        @change="tabsCategoryChange"></u-tabs>
    </view>

    <view v-if="artworksListData.length > 0" class="text-template-list-container">
      <TextTemplateList
        :artworks-list="artworksListData"
        :isBatch="true"
        :showMask="false"
        @handleCheckBox="handleCheckBox"></TextTemplateList>
    </view>
  </view>
</template>

<script>
  import { fontTemplateList, allArtFontTemplateCategory, batchAddTextTemplateArtworks } from '@/api/artworks';
  import TextTemplateList from '@/components/artworksList/textTemplate.vue';
  export default {
    components: {
      TextTemplateList
    },
    data() {
      return {
        tabsCurrent: 0,
        navListData: [],
        selectNum: 0,
        searchFormData: {
          pageNum: 1,
          pageSize: 34,
          cate_id: null,
					status: 'vaild'
        },
        artworksListData: [],
        showNoMoreFlag: false,
        author_id: ''
      }
    },
    onLoad(options) {
      this.author_id = options.author_id;
      this.getCateList();
    },
    methods: {

      // 批量添加
      handleBatchAddTextTemplateArtworks() {
        uni.showLoading({
          title: '添加中',
          mask: true
        });
        let selectionListData = [];
        this.artworksListData.forEach(item => {
          if (item.checked) {
            selectionListData.push(item);
          }
        })
        batchAddTextTemplateArtworks({
          list: selectionListData,
          author_id: this.author_id
        }).then(result => {
          if (result && result.code === 200) {
            uni.hideLoading();
            uni.showToast({
              title: '添加成功',
              icon: 'success',
              mask: true,
            })
            setTimeout(function() {
              let pages = getCurrentPages();
              let pagesLength = pages.length;

              if (pagesLength > 1) {
                uni.navigateBack({
                  delta: 1,
                })
              } else {
                let pages = getCurrentPages();
                let pagesLength = pages.length;

                if (pagesLength > 1) {
                  uni.navigateBack({
                    delta: 1,
                  })
                } else {
                  uni.switchTab({ url: '/pages/creativeCenter/index' });
                }
              }
            }, 1500)
          }
        })
      },

      // 重置
      handleReset() {
        let artworksList = this.artworksListData;
        artworksList.forEach(item => {
          item.checked = false;
        })
        this.selectNum = 0;
        this.artworksListData = artworksList;
      },

      // 选择框
      handleCheckBox(val) {
        let selectNum = this.selectNum;
        if (!this.artworksListData[val].checked) {
          this.selectNum = selectNum + 1;
        } else {
          this.selectNum = selectNum - 1;
        }
        this.artworksListData[val].checked = !this.artworksListData[val].checked;
      },

      // 切换分类
      tabsCategoryChange(index) {
        this.tabsCurrent = index;
        this.searchFormData.cate_id = this.navListData[index].id;
        this.searchFormData.pageNum = 1;
        this.artworksListData = [];
        this.getFontTemplateList();
      },

      // 模板分类列表
			async getCateList() {
				let that = this;
				allArtFontTemplateCategory().then(result => {
					if (result.code == 200 && result.data && result.data.length > 0) {
						that.navListData = result.data;
						this.searchFormData.cate_id = this.navListData[0].id;
            this.getFontTemplateList();
					} else {
						uni.showToast({
							icon: 'none',
							title: result.msg
						})
					}
				});
			},

      // 根据分类id获取作品
      getFontTemplateList() {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
        })
        fontTemplateList(this.searchFormData).then(result => {
          uni.hideToast();
          if (result && result.data && result.data.records && result.data.records.length > 0) {
            let listData = result.data.records;
            listData.forEach(item => {
              item.checked = false;
            })
            let data = [];
            this.artworksListData = [...this.artworksListData, ...listData];
            if (this.searchFormData.pageNum === result.data.total_pages) {
              this.showNoMoreFlag = true;
            }
            this.searchFormData.pageNum = this.searchFormData.pageNum + 1;
          } else {
						uni.showToast({
							title: '没有更多了',
							icon: 'none',
						})
					}
        })
      },
    },
    // 下拉加载
    onReachBottom() {
      this.getFontTemplateList();
    },
  }

</script>

<style lang="scss">
  .batch-template-container{
    padding: 0 32rpx;

    .header-container{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 99;
      background-color: #fff;
      padding: 0 32rpx 12rpx 32rpx;
    }

    .btn-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 32rpx;

      .reset{
        color: #666;
      }
    }

    .text-template-list-container{
      padding-top: 200rpx;
    }
  }
</style>
